<template>
  <div>
    <el-image src="	https://22159555.s21i.faiusr.com/4/ABUIABAEGAAgrKyC8wUo6-LfvAIwgA84rAI.png.webp"/>

    <div id="contact-body">
        <div class="contact-body-div">
          <h1>联系我们   /   400-86-18580</h1>
          <p>合肥优逸云期待您的联系，我们将竭诚为您服务！</p>
          <span id="icon-a">商务：严经理：18956082569   黄经理：18056020622</span>
          <span id="icon-b">hfyyy@aliyun.com</span>
          <span id="icon-c">安徽省合肥市高新区黄山路616号科大讯飞3号楼3楼</span>
        </div>

        <div class="contact-body-div">
            <div class="layout-contact-body">
              <baidu-map
                  class="map"
                  :center="center"
                  :zoom=15
                  @ready="initMap"
                  :scroll-wheel-zoom=true>
                <bm-info-window :height="20"
                    :position="{lng: 117.205924, lat: 31.84853}"
                    title="合肥优逸云科技有限公司"
                    :show="infoWindow.show">
                  <p style="font-size: 12px" v-text="infoWindow.contents"></p>
                </bm-info-window>
                <bm-marker
                    :position="{lng: 117.205624, lat: 31.84703}"
                    :dragging="true"
                    animation="BMAP_ANIMATION_BOUNCE">
                </bm-marker>
              </baidu-map>
            </div>
          </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "ContactView",
  data(){
    return {
      infoWindow: {
        show: true,
        contents: '安徽省合肥市高新区黄山路616号科大讯飞3号楼3层'
      },
      center: {  //经纬度
        lng: 117.205624,
        lat: 31.84703,
      },
      BMap:null,  //百度地图对象
      map:null,   //百度地图实例
    }
  },

  methods: {
    initMap({BMap, map}) {
      this.BMap = BMap;
      this.map = map;
      this.$set(this.center, 'lng',117.205624);
      this.$set(this.center, 'lat',31.84703);
      this.zoom = 'auto';
    }

  },



}
</script>

<style scoped>

@keyframes enter {
  0% {
    opacity: 0;
    transform: scale3d(1, 1, 1) translate3d(1500px, 0, 0);
    animation-timing-function: linear;
  }
  50% {
    opacity: 0.5;
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    animation-timing-function: linear;
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    animation-timing-function: linear;
  }
}

.map {
  animation: 1.2s linear 0s normal enter;
  margin-top: 20px;
  width: 450px;
  height: 300px;
}
h1 {
  animation: 1.3s linear 0s normal enter;
  float: left;
  color: #333333;
  font-size: 18px;
  margin-top: 20px;
  margin-bottom: 40px;
}
p {
  animation: 2s linear 0s normal enter;
  float: left;
  color: #999999;
  font-size: 14px;
  margin-bottom: 80px;
}
#icon-a{
  animation: 1.5s linear 0s normal enter;
  height: 30px;
  background: url('../../assets/imgs/dianhua.svg') no-repeat left;
}
#icon-b{
  animation: 2s linear 0s normal enter;
  height: 20px;
  line-height: 20px;
  background: url('../../assets/imgs/youxiang.svg') no-repeat left;
}
#icon-c{
  animation: 1s linear 0s normal enter;
  height: 35px;
  line-height: 35px;
  background: url('../../assets/imgs/gps.svg') no-repeat left;
}
.contact-body-div>span {
  display: inline-block;
  float: left;
  font-size: 14px;
  color: #666666;
  margin-bottom: 30px;
  background-size: contain;
  padding-left: 10%;
}
.contact-body-div {
  position: relative;
  top: 30px;
  left: 150px;
  width: 450px;
  height: 380px;
}
#contact-body {
  animation: 2s linear 0s normal enter;
  margin: 70px auto 10px auto;
  display: flex;
  width: 1200px;
  height: 420px;
}
</style>